<template>
  <div class="new_audio">
    <div class="header">
      <ltSelectTitle title="最新音乐" :more="false" />
    </div>
    <div v-if="musicList.length > 0" class="list">
      <template v-for="item in musicList" :key="item.id">
        <lengthItem :item="item" @click="playAudioHander(item)"></lengthItem>
      </template>
    </div>
    <div v-else>
      <ltNone>
        <div class="loading">
          <span>加载中...</span>
        </div>
      </ltNone>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getNewSongApi } from '@renderer/api'

import ltSelectTitle from '@renderer/base-ui/lt-select-title/lt-select-title.vue'
import lengthItem from '../recommed/c-cnps/length-item.vue'
import ltNone from '@renderer/base-ui/lt-none/index.vue'

import usePlay from '@renderer/pinia/modules/play'

const playStore = usePlay()

const musicList = ref<any[]>([])

// 获得音乐列表
const newMusicList = async () => {
  const res: any = await getNewSongApi(100)
  musicList.value = res.result
}

onMounted(() => {
  newMusicList()
})

// 点击播放歌曲(播放点击的歌曲)
const playAudioHander = (item: any) => {
  playStore.setCurrentAudio(item)
  playStore.setPlayList(item)
}
</script>

<style scoped lang="scss">
.new_audio {
  .header {
    padding: 10px 10px;
  }
  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
}
</style>
